<template>
  <div class="home">
    <div>
      <el-form :rules="rules" ref="skills" label-width="100px" class="demo-dynamic">
        <el-form-item label="角色属性">
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
            点击输入
          </el-button>
        </el-form-item>
        <el-form-item label="秘籍">
          <el-button @click="miji = true" type="primary" style="margin-left: 16px;">
            点击选择
          </el-button>
        </el-form-item>
        <el-drawer
          title="人物属性"
          :visible.sync="drawer"
          :with-header="false"
          size="50%">
          <br>
          <table cellpadding="17">
            <!--          <table>-->
            <tr>
              <td><el-tag >基础攻击</el-tag></td>
              <td><el-input v-model="form.jichugongji" @input="check_gongji()" style="width: 80px;left: 30%"></el-input></td>
            </tr>
            <tr>
              <td><el-tag >元气</el-tag></td>
              <td><el-input v-model="form.yuanqi" style="width: 80px;left: 30%"></el-input></td>
            </tr>
            <tr>
              <td><el-tag >加速</el-tag></td>
              <td><el-input v-model="form.jiasu" style="width: 80px;left: 30%"></el-input></td>
            </tr>
            <tr>
              <td><el-tag >会心</el-tag></td>
              <td><el-input v-model="form.huixin" style="width: 80px;left: 30%"></el-input></td>
              <td><span>%</span></td>
            </tr>
            <tr>
              <td><el-tag >会效</el-tag></td>
              <td><el-input v-model="form.huixiao" style="width: 80px;left: 30%"></el-input></td>
              <td><span>%</span></td>
            </tr>
            <tr>
              <td><el-tag >破防</el-tag></td>
              <td><el-input v-model="form.pofang" style="width: 80px;left: 30%"></el-input></td>
              <td><span>%</span></td>
            </tr>
            <tr>
              <td><el-tag >目标御劲</el-tag></td>
              <td><el-input v-model="form.yujin" style="width: 80px;left: 30%"></el-input></td>
              <td><span>%</span></td>
            </tr>
            <tr>
              <td><el-tag >目标化劲</el-tag></td>
              <td><el-input v-model="form.huajin" style="width: 80px;left: 30%"></el-input></td>
              <td><span>%</span></td>
            </tr>
            <tr>
              <td><el-tag >目标内防</el-tag></td>
              <td><el-input v-model="form.neifang" style="width: 80px;left: 30%"></el-input></td>
            </tr>
          </table>
          <el-switch
            style="display: block"
            v-model="form.shenyuan_isinclude"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inactive-text="未包含"
            active-text="已包含神元加成的属性"
          >
          </el-switch>
          <br/>
          <div>
            <el-button type="warning" @click="innerDrawer = true">胖叔叔配装属性自动识别</el-button><br/><br/>
            <el-button type="warning" @click=copy_shuxing()>当前面板属性复制（方便保存）</el-button>
            <el-drawer
              title=""
              :append-to-body="true"
              :visible.sync="innerDrawer">
              <div>
                <el-tag class="log">
                  <p>打开胖叔叔配装器页面，点击右侧边栏上方的导出。 </p>
                  <p>弹框上方选择导出属性数据，复制结果选择'Json'。</p>
                  <p>粘贴到下方输入框，点击识别。</p>
                </el-tag>
              </div>

              <el-input v-model="cha_discriminate" style="width: 50%"></el-input><br/><br/><br/>
              <el-button type="warning" @click="cha_dis">点击识别</el-button>
            </el-drawer>
          </div>
        </el-drawer>
        <el-drawer
          title="秘籍"
          :visible.sync="miji"
          :with-header="false">
          <br>
          <table>
            <tr>
              <div>
                <el-tag>三星临</el-tag><br>
                <el-checkbox-group v-model="form.miji_lin"  :max="4">
                  <el-checkbox-button v-for="item in miji_lin" :label="item" :key="item">{{item}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </tr>
            <tr>
              <div>
                <el-tag>兵主逆</el-tag><br>
                <el-checkbox-group v-model="form.miji_bing"  :max="4">
                  <el-checkbox-button v-for="item in miji_bing" :label="item" :key="item">{{item}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </tr>
            <tr>
              <div>
                <el-tag>天斗旋(必须点减调息时间秘籍)</el-tag><br>
                <el-checkbox-group v-model="form.miji_dou"  :max="3">
                  <el-checkbox-button v-for="item in miji_dou" :label="item" :key="item">{{item}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </tr>
            <tr>
              <div>
                <el-tag>起卦</el-tag><br>
                <el-checkbox-group v-model="form.miji_qi"  :max="4">
                  <el-checkbox-button v-for="item in miji_qi" :label="item" :key="item">{{item}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </tr>
            <tr>
              <div>
                <el-tag>变卦</el-tag><br>
                <el-checkbox-group v-model="form.miji_bian"  :max="4">
                  <el-checkbox-button v-for="item in miji_bian" :label="item" :key="item">{{item}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </tr>
            <tr>
              <div>
                <el-tag>鬼星开穴</el-tag><br>
                <el-checkbox-group v-model="form.miji_kai"  :max="4">
                  <el-checkbox-button v-for="item in miji_kai" :label="item" :key="item">{{item}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </tr>

          </table>
        </el-drawer>
        <el-form-item label="目标" >
          <el-select v-model="form.target" style="width: 120px">
            <el-option label="110级" value="6" onselect="target" disabled></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阵眼" >
          <el-select v-model="form.zhenyan" style="width: 120px">
            <el-option label="无阵眼" value="1" onselect="zhenyan" ></el-option>
            <el-option label="花间阵" value="2" onselect="zhenyan" ></el-option>
            <el-option label="气纯阵" value="3" onselect="zhenyan" ></el-option>
            <el-option label="大师阵" value="4" onselect="zhenyan" ></el-option>
            <el-option label="田螺阵" value="5" onselect="zhenyan" ></el-option>
            <el-option label="莫问阵" value="9" onselect="zhenyan" ></el-option>
            <el-option label="毒经阵" value="6" onselect="zhenyan" ></el-option>
            <el-option label="衍天阵-自己" value="7" onselect="zhenyan" ></el-option>
            <el-option label="衍天阵-同门" value="8" onselect="zhenyan" ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item
          v-for="(skills, index) in form.skills"
          :label="'技能' + index"
          :key="skills.key"
          :prop="'skills.' + index + '.value'"
        >

          <el-select v-model="skills.value" placeholder="请选择技能">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="skills.buff" multiple placeholder="请选择buff">
            <el-option
              v-for="item in buff_list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="skills.ming">
            <el-option
              v-for="item in ming_list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button @click.prevent="removeskills(skills)">删除</el-button>
        </el-form-item>
        <el-form-item>

          <el-button @click="addskills">新增技能</el-button>
        </el-form-item>

      </el-form>
      <el-button type="success"  round @click="onSubmit()" style="margin-left: 16px;" :disabled="isDisabled" :loading="isDisabled">计算</el-button>
      <el-button @click="skill_logs = true" round type="primary" style="margin-left: 16px;">
        技能日志
      </el-button>总伤害:{{dps}}
      <el-drawer
        title="技能日志"
        :visible.sync="skill_logs"
        :with-header="false">
        <div>
          <el-table
            :data="skill_log"
            style="width: 100%"
            height="700">
            <el-table-column
              fixed
              prop="name"
              label="技能名称"
              width="150">
            </el-table-column>
            <el-table-column
              fixed
              prop="damage"
              label="伤害预期"
              width="150">
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>



  </div>
</template>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
    font-size: 10px;
  }
  .demo-table-expand .el-form-item{
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    font-size: 10px;
  }
  .log {
    width: auto;
    padding: 10px 16px 170px;
    background-color: #fff6f7;
    border-radius: 4px;
    border-left: 5px solid #1482f0;
    margin: 10px;
    font-size: large
  }
</style>
<script>
  // import { mapGetters } from 'vuex'
  import { cal } from '@/api/cal'
  import { authdps } from '../../api/cal'
  import { pvp_test } from '../../api/cal'


  export default {
    name: 'test',
    data() {
      return {
        rules:{
          totaltime: { type: 'number', required: true, message: '请输入总用时长', trigger: 'blur' }
        },
        options: [{
          value: 'bing',
          label: '兵主逆',
          buff:[],
          ming:"伤害预期",
        }, {
          value: 'dou',
          label: '天斗旋',
          buff:[],
          ming:"伤害预期",
        }, {
          value: 'lin',
          label: '三星临',
          buff:[],
          ming:"伤害预期",
        }, {
          value: 'kai',
          label: '鬼星开穴',
          buff:[],
          ming:"伤害预期",
        }, {
          value: 'ding',
          label: '往者定',
          buff:[],
          ming:"伤害预期",
        },
          {
            value: 'sha',
            label: '杀星在尾',
            buff:[],
            ming:"伤害预期",
          },
          {
            value: 'huo',
            label: '火离',
            buff:[],
            ming:"伤害预期",
          },
          {
            value: 'ling',
            label: '灵器',
            buff:[],
            ming:"伤害预期",
          },
        ],
        ming_list:[
          {
            value:"命中",
            lable:"命中",
          },
          {
            value:"伤害预期",
            lable:"伤害预期",
          },
          {
            value:"会心",
            lable:"会心",
          }
        ],
        buff_list: [
          {
            value: '衍天阵眼五重',
            label: '衍天阵眼五重（增伤+25%）',
          },
          {
            value: '鬼遁',
            label: '鬼遁（攻击+15%）',
          },
          {
            value: '祝祷',
            label: '祝祷（伤害+10%）',
          },
          {
            value: '荧入白',
            label: '荧入白（无视50%防御）',
          },
          {
            value: '重山',
            label: '重山 (九字诀*1.3)',
          },
          {
            value: '山艮',
            label: '山艮 (九字诀*1.05)',
          },
          {
            value: '望旗',
            label: '望旗（兵+10%）',
          },
          {
            value: '明心',
            label: '明心（临双会）',
          },
          {
            value: '正夏',
            label: '正夏（临+10%）',
          },
          {
            value: '擎羊',
            label: '擎羊（爆灯+45%）',
          },
        ],
        cha_discriminate:"",
        value: '',
        isDisabled:false,
        dpsData: [],
        itemkey: '',
        dps:0,
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        miji_lin:["伤害+5%","伤害+4%","伤害+3%","会心+4%","会心+3%","会心+2%","效果：瞬发斗"],
        miji_bing:["伤害+5%","伤害+4%","伤害+3%","会心+4%","会心+3%",],
        miji_dou:["伤害+5%","伤害+4%","伤害+3%","会心+4%","会心+3%","会心+2%"],
        miji_qi:["调息时间-3s","调息时间-2s"],
        miji_bian:["调息时间-2s","调息时间-2s","调息时间-1s","星运消耗-5"],
        miji_kai:["伤害+5%","伤害+4%","会心+4%","会心+3%",],
        drawer: false,
        miji:false,
        guaxiang:false,
        res:false,
        auth:false,
        skill_logs:false,
        skill_log:[],
        innerDrawer: false,
        form: {
          skills:[{'value': 'dou', 'buff': [],'ming':"伤害预期"}, {'value': 'dou', 'key': 1606380416391, 'buff': [],'ming':"伤害预期"}, {'value': 'lin', 'key': 1606380420074, 'buff': [],'ming':"伤害预期"}, {'value': 'lin', 'key': 1606380422270, 'buff': [],'ming':"伤害预期"}, {'value': 'kai', 'key': 1606380425103, 'buff': ['擎羊'],'ming':"伤害预期"}, {'value': 'kai', 'key': 1606380430714, 'buff': ['擎羊'],'ming':"伤害预期"}],
          shenyuan_isinclude:false,
          miji_lin:["伤害+5%","伤害+4%","伤害+3%","会心+4%"],
          miji_bing:["伤害+5%","伤害+4%","伤害+3%","会心+4%"],
          miji_dou:["伤害+5%","伤害+4%","会心+4%"],
          miji_qi:["调息时间-3s","调息时间-2s"],
          miji_bian:["调息时间-2s","调息时间-2s","调息时间-1s","星运消耗-5"],
          miji_kai:["伤害+5%","伤害+4%","会心+4%","会心+3%",],
          jichugongji: '11692',
          yuanqi: '3712',
          jiasu:'325',
          huixin: '24.61',
          huixiao: '175',
          pofang: '37.53',
          wushuang: '0',
          pozhao: '0',
          zhenyan:'1',
          qixue_1:'3',
          qixue_2:'1',
          qixue_3:'1',
          qixue_4:'1',
          qixue_5:'1',
          qixue_6:'1',
          qixue_7:'1',
          qixue_8:'1',
          qixue_9:'1',
          qixue_10:'1',
          qixue_11:'1',
          qixue_12:'1',
          buff: [],
          med: [],
          target:'6',
          yujin:'1.02',
          huajin:'65.93',
          neifang:'2200',
        }
      }
    },
    methods: {
      onSubmit() {
        this.isDisabled = true
        setTimeout(() => {
          this.isDisabled = false

        },3000)
        pvp_test(this.form).then(response => {

          this.skill_log = []
          this.skill_log = response.data.skill_log
          this.dps = response.data.dps
          this.itemkey = Math.random()
          ;
        })
      },
      auth_dps() {
        authdps(this.form).then(response => {
          this.authData = []
          this.authData = response.data
          console.log(response.data)
        })
      },
      addskills() {
        this.form.skills.push({
          value: '',
          key: Date.now(),
          buff:[],
          ming:"伤害预期"
        });
        console.log(this.form.skills)
      },
      removeskills(item) {
        var index = this.form.skills.indexOf(item)
        if (index !== -1) {
          this.form.skills.splice(index, 1)
        }
      },
      cha_dis(){
        let result
        result = JSON.parse(this.cha_discriminate)
        this.form.jichugongji = result.基础攻击
        this.form.yuanqi = result.元气
        this.form.jiasu = result.加速等级
        this.form.huixin = result.会心率.replace("%","")
        this.form.huixiao = result.会心效果.replace("%","")
        this.form.pofang = result.破防率.replace("%","")
        this.form.yujin = result.御劲率.replace("%","")
        this.form.huajin = result.化劲率.replace("%","")
        this.form.neifang = result.内防等级
        this.innerDrawer = false
      },
      copy_shuxing(){
        let oInput = document.createElement('input');
        let sx = {
          "元气":this.form.yuanqi,
          "加速等级":this.form.jiasu,
          "基础攻击":this.form.jichugongji,
          "会心率":this.form.huixin,
          "会心效果":this.form.huixiao,
          "破防率":this.form.pofang,
          "御劲率":this.form.yujin,
          "化劲率":this.form.huajin,
          "内防等级":this.form.neifang,
        }
        oInput.value = JSON.stringify(sx);
        console.log(sx)
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        })
      },

      check_gongji(){
        if (this.form.jichugongji > 15500) {
          this.$alert('你可能是无皇大佬/第一次使用计算器的萌新</br>检测到基础攻击力填入可能存在异常</br>请再次确认填入的是“基础”攻击力</br>在游戏中光标移到面板的攻击力上，下方会显示“基础混元攻击”', {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString:true
            // callback: action => {this.$message({type: 'info', message: `action: ${ action }`});}
          })
        }
      },
    }
  }
</script>
